<template>
  <div class="box">
    <div class="left">
      <el-button
        plain
        type="primary"
        size="medium"
        icon="el-icon-plus"
        @click="openDialog('add')"
      >新增</el-button>
      <slot name="del" />
      <el-button
        plain
        type="warning"
        size="medium"
        icon="el-icon-download"
      >导出</el-button>
    </div>
    <div class="right">
      <el-tooltip
        effect="dark"
        :content="headShow ? '关闭搜索区' : '打开搜索区'"
        placement="top"
      >
        <el-button
          :icon="headShow ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
          circle
          @click="handlerHead"
        />
      </el-tooltip>

      <el-tooltip effect="dark" content="刷新" placement="top">
        <el-button
          icon="el-icon-refresh"
          circle
          @click="handlerLoading"
        />
      </el-tooltip>

      <el-popover
        style="margin-left: 10px"
        placement="bottom-end"
        width="100"
        trigger="click"
      >
        <el-row v-for="item in checkData" :key="item.name">
          <i class="el-icon-guide mr" />
          <el-checkbox v-model="item.isckecked">{{ item.name }}</el-checkbox>
        </el-row>
        <el-button slot="reference" icon="el-icon-menu" circle />
      </el-popover>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HeaderButton',
  props: {
    headShow: {
      type: Boolean,
      default: true
    },
    // 控制表格按钮
    checkData: {
      type: Array,
      default: () => {}
    }

  },
  methods: {
    // 通知父组件打开对话框 并修改formType为add
    openDialog(type) {
      this.$emit('open', 'add')
    },
    // 控制头部的显示隐藏
    handlerHead() {
      this.$emit('update:headShow', !this.headShow)
    },
    // 控制刷新
    handlerLoading() {
      this.$emit('loading')
    }

  }

}
</script>

<style lang="less" scoped>
.el-container {
  background-color: #fff;
  padding: 20px;
}
.el-input {
  width: 230px;
}

.label {
  font-size: 14px;
  color: #606266;
  font-weight: 700;
}
.box {
  display: flex;
  justify-content: space-between;
}
.el-pagination {
  text-align: right;

  margin-top: 20px;
}
.title {
  font-size: 14px;
  font-weight: 700;
}

/deep/.el-dialog__header {
  background: #fafafa;
}
</style>
